<template>
	<view class="">
		<u-popup @close="close" @open="open" v-model="popShows" mode="center" :border-radius="bordRadio" :width="width" :closeable="false">
			<view class="parkKeyIn_pop">
				<view class="parkKeyIn_close" @click="close" v-if="closeable"><u-icon name="close"></u-icon></view>
				<view class="pop_title">
					{{popTitle}}
				</view>
				<view 
				:class="[value == '请输入泊位编号' ? 'inputcolor' : 'inputweight']"
				class="pop_input flex_zhcenter margin-bt30">
					{{value}}
				</view>
				<view class="flex_wrap">
					<view class="pop_number flex_zhcenter"
					 @click="keyNumClick(index + 1)" 
					 v-for="(item,index) in 9" :key="index">
						{{index+1}}
					</view>
				</view>
				<view class="pop_footer flex_hcneter_bet">
					<view class="footer_item flex_zhcenter" @click="del">{{popbtCancel}}</view>
					<view class="footer_item flex_zhcenter"  @click="keyNumClick(0)">0</view>
					<view class="footer_item flex_zhcenter" @click="confim">{{popbtConfim}}</view>
				</view>
				<view class="flex_zhcenter comm_btn parkKeyIn_smbtn" @click="scanCode">
					<view class="flex_hcneter">
						<u-icon name="scan"  color="#fff" size="51"></u-icon>
						<view class="">扫码停车</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
	  name: "index",
	  components: {
	    
	  },
		props: {
			popbtCancel: {//取消按钮
				type: [String],
				default:()=>{
					return '删除'
				}
			},
			popbtConfim: {//确定按钮
				type: [String],
				default:()=>{
					return '下一步'
				}
			},
			popTitle: {//弹窗标题
				type: [String],
				default:()=>{
					// 请输入您车辆停放的泊位编号
					return ''
				}
			},
			popShow: {//弹窗显示隐藏
				type: [Boolean],
				default:()=>{
					return false
				}
			},
			bordRadio: {//圆角
				type: [Number,String],
				default:()=>{
					return 16
				}
			},
			width: {//宽度
				type: [Number,String],
				default:()=>{
					return '606rpx'
				}
			},
			closeable: {//是否显示关闭按钮
				type: [Boolean],
				default:()=>{
					return true
				}
			},
		},
	  data() {
	    return {
	      value:'请输入泊位编号',
				popShows:false,
	    };
	  },
		watch:{
			popShow(val){
				this.popShows = val
			}
		},
	  mounted() {
	    
	  },
	  methods: {
			async scanCode(){//扫码
				this.$emit('scanCode')
			},
			// 根据二维码获取泊位号
			async selectPlaceNum(shortUrl) {//扫停车码，返回泊位信息
				let res = await this.$u.api.selectPlaceNum({shortUrl})
				if(!res) return uni.hideLoading()
				let data = res.data || {}
				this._judgeParkinglotDistanceAndParking(data.placenum, 1)
				uni.hideLoading()
			},
			keyNumClick(e){
				if(this.value == '请输入泊位编号') this.value = ''
				let configApi = this.$configApi || {}
				let configs = this.$configApi.configs || ''
				let placenumLength = configs.placenumLength || ''
				let arr = placenumLength.split(',') || []
				if(arr.length > 1){
					let length = arr[1]
					if (this.value.length == length) return
				}
				this.value =  this.value + e
			},//按键点击
			del(){//删除输入值
				if(this.value == '请输入泊位编号') return
				this.value=this.value.slice(0, -1)
				if(!this.value) this.value = '请输入泊位编号'
			},
			open(){
				this.popShows = this.popShow
			},//打开弹窗
			chongzhi(){//重置弹窗值
				this.value = '请输入泊位编号'
			},
			setValue(e){//设置值
				this.value = e
			},
			confim(){//完成
				if(this.value == '请输入泊位编号') {
					this.$refs.uToast.show({
						title: '请输入泊位号',
						type: 'warning',
					})
					return 
				}
				this.popShows = false
				this.$emit('confim',this.value)
			},
			close(){//关闭弹窗
				this.popShows = false
				this.$emit('close')
			},
	  }
	};
</script>

<style lang="less" scoped>
	.parkKeyIn_pop{
		padding: 90rpx 30rpx 30rpx;position: relative;
		.parkKeyIn_close{position: absolute; z-index: 3;top: 30rpx;right: 30rpx;}
		.pop_title{
			text-align: center;color: #666666;font-size: 28rpx;
		}
		.pop_input{height: 144rpx;font-size: 60rpx;border-bottom: 1rpx solid #e4e4e4;}
		.inputweight{font-weight: bold;}
		.inputcolor{color: #C4C4C4;}
		.pop_number{width: 100%/3;height: 120rpx;color: #333333;font-size: 48rpx;font-weight: bold;}
		.parkKeyIn_smbtn{
			margin-top: 50rpx;
		}
		.pop_footer{
			
			.footer_item{
				width: 100%/3;height: 100rpx;font-size: 36rpx;
			}
			.footer_item:first-child{
				width: 140rpx;
				height: 74rpx;
				background-color: #FF3939;
				text-align: center;
				border-radius: 80rpx;
				font-size: 28rpx;
				line-height: 74rpx;
				color: #fff;
			}
			.footer_item:last-child{
				width: 140rpx;
				height: 74rpx;
				background: linear-gradient(180deg, #30B7FE 0%, #2678FA 100%);
				text-align: center;
				border-radius: 80rpx;
				font-size: 28rpx;
				color: #fff;
				line-height: 74rpx;
			}
			.footer_item:nth-child(2n){
				font-size: 48rpx;font-weight: bold;
			}
		}
	}
</style>